<!-- 定性考核供应商 -->
<template>
  <a-drawer
    :title="title"
    width="650"
    :bodyStyle="{ padding: '0' }"
    :visible="drawerVisible"
    :maskClosable="false"
    @close="onDrawerClose">
    <div class="header-box">
      <div>
        <span>供应商</span>：<span>河南盛世机械工具集团有限公司</span>
        <span class="ml-30">供应商编号</span>：<span>GYS20241208001</span>
      </div>
      <div>        
        <span>所属品类</span>：<span>传感器</span>
        <span class="ml-30">当前等级</span>：<span>A类</span>
        <span class="ml-30">考核时间</span>：<span>2024-01-01 至 2024-12-31</span>
      </div>
      <div>        
      </div>
    </div>
    <div class="detail-form-container">
      <a-table
        ref="table"
        rowKey="id"
        size="middle"
        bordered
        :columns="columns"
        :dataSource="dataSource"
        :scroll="{ x: 1, y: 500 }"
        :pagination="false"
        class="mt-10">
        <template slot="score" slot-scope="text, record">
          <span v-if="isLook">{{ text }}</span>
          <a-input-number v-else v-model="record.score" :min="0" :max="10" :precision="0" @blur="scoreChange(record)" />
        </template>
      </a-table>
    </div>
    <div class="footer-box">
      <slot name="footer">
        <a-button v-if="!isLook" type="primary" @click="onConfirm">确定</a-button>
        <a-button :style="{ marginLeft: '8px' }" @click="onCancel">取消</a-button>
      </slot>
    </div>
  </a-drawer>
</template>

<script>
// import Decimal from 'decimal.js';

export default {
  name: 'SupplierQualitativeExamine',
  props: {
    title: {
      type: String,
      default: '选择供应商'
    }
  },
  data() {
    return {
      isLook: false,
      drawerVisible: false,
      columns: [
        {
          title: '评分项/权重',
          dataIndex: 'scoreWeight',
          width: 120,
          ellipsis: true,
          customRender: (value, row, index) => {
            const obj = {
              children: value,
              attrs: {},
            };
            if ([0, 9].includes(index)) obj.attrs.rowSpan = 3;
            if ([3, 12].includes(index)) obj.attrs.rowSpan = 2;
            if ([5].includes(index)) obj.attrs.rowSpan = 4;
            if ([1, 2, 4, 6, 7, 8, 10, 11, 13].includes(index)) obj.attrs.rowSpan = 0;
            return obj;
          },
        },
        { title: '评分项目', dataIndex: 'scoreProject', width: 120, ellipsis: true },
        { title: '评分(0~10分)', dataIndex: 'score', width: 120, scopedSlots: { customRender: 'score' }, ellipsis: true },
        { title: '得分', dataIndex: 'getScore', width: 80, ellipsis: true },
      ],
      dataSource: [
        { type: '1', scoreWeight: '价格（30%）', scoreProject: '价格下降率', score: 0, getScore: 0 },
        { type: '1', scoreWeight: '价格（30%）', scoreProject: '价格弹性', score: 0, getScore: 0 },
        { type: '1', scoreWeight: '价格（30%）', scoreProject: '价格透明度', score: 0, getScore: 0 },
        { type: '2', scoreWeight: '付款条件（20%）	', scoreProject: '付款账期', score: 0, getScore: 0 },
        { type: '2', scoreWeight: '付款条件（20%）	', scoreProject: '付款条款弹性', score: 0, getScore: 0 },
        { type: '3', scoreWeight: '交货（20%）	', scoreProject: '供货及时度', score: 0, getScore: 0 },
        { type: '3', scoreWeight: '交货（20%）', scoreProject: '供货完整性', score: 0, getScore: 0 },
        { type: '3', scoreWeight: '交货（20%）', scoreProject: '送货弹性', score: 0, getScore: 0 },
        { type: '3', scoreWeight: '交货（20%）', scoreProject: '退货难易度', score: 0, getScore: 0 },
        { type: '4', scoreWeight: '服务（15%）', scoreProject: '紧急应对能力', score: 0, getScore: 0 },
        { type: '4', scoreWeight: '服务（15%）', scoreProject: '增值服务', score: 0, getScore: 0 },
        { type: '4', scoreWeight: '服务（15%）', scoreProject: '问题处理及时性', score: 0, getScore: 0 },
        { type: '5', scoreWeight: '品质（15%）	', scoreProject: 'ISO质量标准认证', score: 0, getScore: 0 },
        { type: '5', scoreWeight: '品质（15%）	', scoreProject: '产品质量稳定性', score: 0, getScore: 0 },
      ],
    };
  },
  methods: {
    deepClone(obj) {
      // 定义一个变量 并判断是数组还是对象
      let cloneObj = Array.isArray(obj) ? [] : {};
      // 判断obj存在并且是对象类型的时候 因为null也是object类型，所以要单独做判断
      if(obj && typeof obj === 'object' && obj != null) {
        // 循环对象类型的obj
        for(let key in obj) {
          let item = obj[key];
          // hasOwnProperty可以检测属性是否是对象自有属性
          if(obj.hasOwnProperty(key)) {
            cloneObj[key] = item && typeof item === 'object' ? this.deepClone(item) : item;
          }
        }
      }
      return cloneObj;
    },
    onDrawerOpen(data, isLook) {
      console.log(data, 'onDrawerOpen');
      if (data.newList) this.dataSource = this.deepClone(data.newList);
      this.drawerVisible = true;
      this.isLook = isLook;
    },
    onDrawerClose() {
      this.drawerVisible = false;
    },
    compute(val) {
      return Number(val.toFixed(3));
    },
    scoreChange(record) {
      const { type, score } = record;
      let mul = 1;
      if (['1', '2'].includes(type)) mul = 0.7;
      if (['3', '4'].includes(type)) mul = 0.35;
      if (['5'].includes(type)) mul = 0.525;
      record.getScore = this.compute(score * mul);
    },
    onConfirm() {
      this.drawerVisible = false;
      let totalScore = 0;
      let score1 = 0;
      let score2 = 0;
      let score3 = 0;
      let score4 = 0;
      let score5 = 0;
      this.dataSource.forEach(item => {
        const { type, getScore } = item;
        totalScore += getScore;
        if (type == '1') score1 += getScore;
        if (type == '2') score2 += getScore;
        if (type == '3') score3 += getScore;
        if (type == '4') score4 += getScore;
        if (type == '5') score5 += getScore;
      })
      const obj = {
        totalScore: this.compute(totalScore),
        score1: this.compute(score1),
        score2: this.compute(score2),
        score3: this.compute(score3),
        score4: this.compute(score4),
        score5: this.compute(score5),
      }
      const newList = this.deepClone(this.dataSource);
      this.$emit('successCallback', obj, newList);
    },
    onCancel() {
      this.drawerVisible = false;
    }
  }
}
</script>


<style lang="less" scoped>
.header-box {
  background-color: rgba(245, 245, 245, 1);
  padding: 6px 30px;
}
.footer-box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(31, 127, 227, 0.08);
  display: flex;
  justify-content: center;
}
</style>